<h:panelGroup layout="block"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:nxu="http://nuxeo.org/nxweb/util"
  xmlns:nxd="http://nuxeo.org/nxweb/document">

  <div style="display: none" id="uploadForm">
    <h:form enctype="multipart/form-data" class="packageUploadBlock">
      <h5>
        <h:outputText value="#{messages['label.upload.package']}" />
      </h5>
      <nxu:inputFile required="true" id="t_pkgupload"
        editFilename="false" value="#{connectStatus.packageToUpload}"
        filename="#{connectStatus.packageFileName}">
      </nxu:inputFile>
      <h:message styleClass="errorMessage" for="t_pkgupload" />
      <h:commandButton value="#{messages['command.upload']}"
        action="#{connectStatus.uploadPackage()}" styleClass="button" />
      <input type="button" value="#{messages['command.cancel']}"
        onclick="jQuery('#uploadForm').css('display','none');"
        class="button" />
    </h:form>
  </div>
  <h:outputScript target="#{pageJsTarget}">
    //<![CDATA[
    function displayConnectIframe() {
      var margin = 80;
      var min = 200;
      jQuery('#connectLoaderWaiter').css('display', 'none');
      var h = jQuery(document).height() - jQuery("#beforeIframe").position().top - margin;
      if (h < min) {
        h = min;
      }
      jQuery("#connectIframe").height(h);
      jQuery("#connectIframe").css("display", "block");
    }
    //]]>
  </h:outputScript>
  <a4j:outputPanel id="connectAppListing" layout="block">
    <div class="actionBar">
      <h:outputText value="#{messages['connect.local.repository.desc']}" />
      <br />
      <h:form>
        <h:outputText value="#{messages['label.packagetype']}" />
        <h:selectOneListbox class="dataInputText" size="1"
          value="#{appsViews.packageTypeFilter}">
          <f:ajax execute="@this" render="connectAppListing" event="change" />
          <nxu:selectItems value="#{appsViews.packageTypes}" var="itype"
            itemValue="#{itype.value}"
            itemLabel="#{messages[itype.label]}" />
        </h:selectOneListbox>
        <input type="button" value="#{messages['label.upload.package']}"
          onclick="jQuery('#uploadForm').css('display','block');"
          class="button" />
      </h:form>
    </div>
    <span id="beforeIframe"></span>
    <iframe id="connectIframe"
      src="#{contextPath}/site/connectClient/packages/local?type=#{appsViews.packageTypeFilter}"
      frameborder="0" scrolling="auto" width="100%"
      onload="javascript:displayConnectIframe();" style="display: none">
    </iframe>
    <div id="connectLoaderWaiter"
      style="width: 100%; height: 100px; text-align: center">
      <img src="#{contextPath}/img/big_loading.gif" />
    </div>
  </a4j:outputPanel>

</h:panelGroup>